<template>
  <div class="app-container calendar-list-container">
    <div class="yt-data-list" style="margin-top: 0">
      <!--待签核、已审核-->
      <div class="yt-list-title">
        <span @click="handleActive(0)" :class="{ 'noFocus': active===1 }" style="cursor: pointer;">{{$t('myApplication.approvalWait')}}</span>
        <span style="margin-left: 10px;cursor: pointer;" :class="{ 'noFocus': active===0 }" @click="handleActive(1)">{{$t('myApplication.approvalCompleted')}}</span>
      </div>
      <div class="yt-list-content">
        <el-table :data="signatureList" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;margin-top: 10px" class="yt-table" v-loading.body="listLoading" max-height="600">
          <el-table-column align="center" :label="$t('myApplication.applyNo')" prop="applyNo" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <!--待确定栏位-->
          <!--<el-table-column align="center" label="申请名称" class-name="pd" width="300">-->
            <!--<template slot-scope="scope">-->
              <!--<span style="color: #0000ff" @click="details(scope.row)">-->
                <!--{{ scope.row.bdName }}-->
              <!--</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column align="center" :label="$t('myApplication.applyName')" class-name="pd" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span style="text-decoration: underline;color: #6dcaa8;cursor: pointer;" @click="details(scope.row,'ratify')">
                {{ scope.row.applyName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('myApplication.applyTypeName')" prop="applyTypeName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <!--如果是已签核，显示申请单状态-->
          <el-table-column align="center" :label="$t('myApplication.status')" v-if="active===1" key="1" prop="statusName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.createEName')" prop="createEName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.applyMoney')" v-if="active===0" key="3" :formatter="formatContent"  prop="applyMoney" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.createTime')" prop="createTime" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.operation')" v-if="active===0" min-width="150" key="2">
            <template slot-scope="scope">
              <!--如果是已签核，不显示操作栏-->
              <el-button size="small" type="primary" style="padding: 1px 10px" @click="handlePass(scope.row.id)">{{$t('myApplication.pass')}}</el-button>
              <el-button size="small" type="warning" style="padding: 1px 10px" @click="handleRevoke(scope.row)">{{$t('myApplication.reject')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="signatureQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="signatureQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="signatureTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--我的申请-->
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{$t('myApplication.myApplication')}}</span>
      </div>
      <div class="yt-list-content">
        <el-table :data="applyList" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;margin-top: 10px" class="yt-table" v-loading.body="listLoading" max-height="600">
          <el-table-column align="center" :label="$t('myApplication.applyNo')" prop="applyNo" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.applyNames')" class-name="pd" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span style="text-decoration: underline;color: #6dcaa8;cursor: pointer;" @click="details(scope.row)">
                {{ scope.row.applyName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('myApplication.applyTypeName')" prop="applyTypeName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.createEName')" prop="createEName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.createTime')" prop="createTime" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.confirmTime')" prop="confirmTime" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.status')" prop="statusName" class-name="pd" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column align="center" :label="$t('myApplication.statusName')" min-width="150">
            <template slot-scope="scope">
              <el-button size="small" type="primary" v-if="scope.row.applyType==='1'" style="padding: 1px 10px" @click="handleWithdrawal(scope.row.id,scope.row.applyType)" :disabled="scope.row.status!=='0'">{{$t('myApplication.withdrawal')}}</el-button>
              <el-button size="small" type="warning" v-if="scope.row.status!=='1'" style="padding: 1px 10px" @click="handleDelete(scope.row.id)" :disabled="scope.row.status==='0'">{{$t('myApplication.delete')}}</el-button>
              <el-button size="small" type="success" v-if="scope.row.applyType!=='1'" style="padding: 1px 10px" @click="handleCopy(scope.row.id)">{{$t("travelManagement.travelApplicationDetails.button.copy")}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="applySizeChange"
            @current-change="applyCurrentChange"
            :current-page.sync="applyQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="applyQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="applyTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    selectWaitConfirm,
    selectApproved,
    pass,
    revoke,
    myApply,
    withdrawal,
    deleteById
  } from '@/api/management/myApplication';
  import { copyApplyToDraft } from '@/api/travelManagement/travelApplication';

  export default {
    name: 'myApplication',
    data() {
      return {
        listLoading: true,
        active: 0,
        signatureList: [],
        signatureQuery: {
          page: 1,
          limit: 10
        },
        signatureTotal: 0,
        applyList: [],
        applyTotal: 0,
        applyQuery: {
          page: 1,
          limit: 10
        }
      };
    },
    created() {
      this.getList();
      this.myApplyList()
    },
    methods: {
      formatContent(value) {
        if (!value) {
          return ''
        }
        if (!value.applyMoney) {
          return ''
        }
        const val = value.applyMoney;
        if (typeof val === 'number') {
          const intPart = val - val % 1; // 获取整数部分（这里是windy93的方法）
          const intPartFormat = (intPart + '').replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断
          if (intPart === val) {
            return intPartFormat
          } else {
            // 有小数
            const value2Array = (val + '').split('.');
            return intPartFormat + value2Array[1]
          }
        } else {
          const intPart = Number(val) - Number(val) % 1; // 获取整数部分（这里是windy93的方法）
          const intPartFormat = (intPart + '').replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断
          if (intPart === 0) {
            return intPartFormat
          } else {
            // 有小数
            const value2Array = (val + '').split('.');
            return intPartFormat + value2Array[1]
          }
        }
      },
      // 待签核、已签核
      handleActive(val) {
        // 待签核、已签核切换
        this.active = val
        this.getList();
      },
      getList() {
        // this.active:0 待签核 ；1：已签核
        this.listLoading = true;
        if (this.active === 0) {
          selectWaitConfirm(this.signatureQuery).then(res => {
            this.signatureList = res.data.rows
            this.signatureTotal = res.data.total
            this.handleDic(this.signatureList)
            // if (this.signatureList && this.signatureList.length > 0) {
            //   this.signatureList.forEach(value => {
            //     if (value && value.applyMoney) {
            //       value.applyMoneyString = this.formatContent(value)
            //     }
            //   })
            // }
          });
        } else {
          selectApproved(this.signatureQuery).then(res => {
            this.signatureList = res.data.rows
            this.signatureTotal = res.data.total
            this.handleDic(this.signatureList)
          });
        }
        this.listLoading = false;
      },
      handleDic(list) {
        if (list && list.length > 0) {
          list.forEach((item, index) => {
            this.$store.getters.allDic.applyType.forEach(doc => {
              if (item.applyType === doc.value) {
                this.$set(list[index], 'applyTypeName', doc.label)
              }
            })
            this.$store.getters.allDic.applyStatus.forEach(doc => {
              if (item.status === doc.value) {
                this.$set(list[index], 'statusName', doc.label)
              }
            })
          })
        }
        this.listLoading = false;
      },
      handlePass(id) {
        this.$confirm(this.$t('myApplication.sureTips'), this.$t('tips.tips'), { // '是否確認通過該申請?'
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          // 通过
          pass({ id }).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
              message: res.data,
              type: res.status === 200 ? 'success' : 'warning'
            });
            if (res.status === 200) {
              this.getList()
              this.myApplyList()
            }
          });
        });
      },
      handleRevoke(row) {
        this.$confirm(this.$t('myApplication.revokeTips'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          // 驳回
          revoke(row.id).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
              message: res.data,
              type: res.status === 200 ? 'success' : 'warning'
            });
            if (res.status === 200) {
              this.getList()
              this.myApplyList()
            }
          });
        });
      },
      myApplyList() {
        myApply(this.applyQuery).then(res => {
          this.applyList = res.data.rows
          this.applyTotal = res.data.total
          this.handleDic(this.applyList)
        });
      },
      handleSizeChange(val) {
        this.signatureQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.signatureQuery.page = val;
        this.getList();
      },
      // 复制差旅费申请至草稿箱
      handleCopy(id) {
        if (id) {
          copyApplyToDraft({ id }).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
              message: res.data,
              type: res.status === 200 ? 'success' : 'warning'
            });
            // 跳转至草稿匣
            this.$router.push({ path: '/travelManagement/travelApplication' })
          })
        } else {
          this.$notify({
            title: this.$t('tips.fail'),
            message: 'id为空',
            type: 'warning'
          });
        }
      },
      // 我的申请
      handleDelete(id) {
        this.$confirm(this.$t('tips.permanentDelete'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          deleteById({ id }).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
              message: res.data,
              type: res.status === 200 ? 'success' : 'warning'
            });
            if (res.status === 200) {
              this.myApplyList()
            }
          });
        });
      },
      handleWithdrawal(id,applyType) {
        // 抽单
        withdrawal({ id,applyType }).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.data,
            type: res.status === 200 ? 'success' : 'warning'
          });
          if (res.status === 200) {
            this.myApplyList()
          }
        });
      },
      applySizeChange(val) {
        this.applyQuery.limit = val;
        this.myApplyList();
      },
      applyCurrentChange(val) {
        this.applyQuery.page = val;
        this.myApplyList();
      },
      details(row, title) {
        // 1:专编申请；2：差旅费申请
        if (row.applyType === '1') {
          const distinction = 'myApplication'
          this.$router.push({ path: '/demandManager/specialApplication', query: { applyId: row.id, status: row.status, ratify: title, distinction } })
        } else {
          this.$router.push({ path: '/travelManagement/travelApplicationDetails', query: { applyId: row.id, status: row.status, ratify: title } })
        }
      }
    }
  };
</script>
<style scoped>
  .yt-data-list .yt-list-title span.noFocus {
    color: #606266;
    border-bottom: 0;
  }
</style>
